最近南部陰雨綿綿，期盼一切都好，望著窗外的雨將外牆染成了漸層的灰色，我想不如就來用 CSS 做個漸層色邊框吧 ( 一點關係也沒有 )，其實主要是接觸漸層色之後，就不斷在思考漸層色能夠有哪些更進階的用法，這些用法的第一種就獻給邊框囉～

正文開始

漸層色邊框除了使用「影像邊框」的做法，也可以透過虛擬元素定位、background-clip 裁切背景和影像邊框這幾種方式，產生「漸層色邊框」的有趣效果，這篇教學會介紹這幾種製作漸層色邊框的方法。

使用虛擬元素定位製作漸層色邊框

有別於「影像邊框」可以直接改變邊框樣式，padding 外邊界的做法需要額外使用一個虛擬元素作為漸層色背景，運用定位和尺寸的差異，就能產生漸層邊框的效果，下方範例額外使用 CSS 變數取代寬度、圓角半徑等需要修改的數值，產生三種不同粗細和顏色的邊框 ( 注意，這種做法會讓元素的寬度額外多出兩倍邊框寬度 )。

• 參考：CSS 漸層色、影像邊框 border-image、CSS 變數
• 線上展示：https://codepen.io/oxxo/pen/azbjReX

<!-- HTML 程式碼 -->
<div class="d">apple</div>
<div class="d d1">banana</div>
<div class="d d2">oxxo</div>

<!-- CSS 程式碼 -->
<style>
  .d {
    --r: 5px;            /* 圓角半徑 */
    --bw: 5px;           /* 邊框粗細 */
    position: relative;
    width: 100px;
    height: 100px;
    margin: 20px;
    padding: 5px;
    background: #fff;
    box-sizing: border-box;  /* 避免 padding 影響寬度 */
    border-radius: var(--r); /* 邊框圓角 */
  }
  .d::before {
    position: absolute;
    content: "";
    z-index: -1;
    top: calc(var(--bw) * -1);          /* 往上偏移一個邊框寬 */
    left: calc(var(--bw) * -1);         /* 往左偏移一個邊框寬 */
    width: calc(100% + 2 * var(--bw));  /* 寬度增加兩個邊框寬 */
    height: calc(100% + 2 * var(--bw)); /* 高度增加兩個邊框寬 */
    background: linear-gradient(#f00, #00f);
    border-radius: var(--r);  /* 邊框圓角 */
  }
  .d1{
    --r: 10px;
    --bw: 10px;
    width: 150px;
    margin: 30px 25px;
  }
  .d1::before {
    background: linear-gradient(#f00, #fc0, #0c0, #09c, #00c);
  }
  .d2{
    --r: 20px;
    --bw: 20px;
    width: 200px;
    margin: 50px 35px;
  }
  .d2::before {
    background:conic-gradient(
        #500 0, #500 45deg,
        #f00 45deg, #f00 90deg,
        #f50 90deg, #f50 135deg,
        #ff0 135deg,#ff0 180deg,
        #0c0 180deg, #0c0 225deg,
        #09d 225deg, #09d 270deg,
        #00b 270deg, #00b 315deg,
        #909 315deg, #909 360deg
      );
  }
</style>

使用 background-clip 製作漸層色邊框

雖然使用定位的方式可以製作漸層邊框，但卻無法改變邊框樣式，因此可以額外使用 background-clip 進行背景裁切，將正常邊框的寬度納入裁切範圍中，就可以修改原本邊框樣式，產生更多不同的邊框變化 ( 注意，雖然這個做法的寬度不會變寬，但如果要設定虛線的邊框樣式，則需要將內容背景色與後方背景色設為一致 )。

• 參考：background-clip 裁切背景
• 線上展示：https://codepen.io/oxxo/pen/gbOjQYM

<!-- HTML 程式碼 -->
<div class="d">apple</div>
<div class="d d1">banana</div>
<div class="d d2">oxxo</div>

<!-- CSS 程式碼 -->
<style>
  .d {
    --r: 5px;            /* 圓角半徑 */
    --bw: 5px;           /* 邊框粗細 */
    position: relative;
    width: 100px;
    height: 100px;
    margin: 10px;
    background: #fff;
    padding: 5px;
    box-sizing: border-box;          /* 避免 padding 影響寬度 */
    border: var(--bw) solid #0000;  /* 原本邊框顏色設為透明 */
    background-clip: padding-box;   /* 背景裁切設定 */
    border-radius: calc(var(--r) + var(--bw)); /* 邊框圓角 */
  }
  .d::before {
    position: absolute;
    content: "";
    z-index: -1;
    top: calc(var(--bw) * -1);           /* 往上偏移一個邊框寬 */
    left: calc(var(--bw) * -1);          /* 往左偏移一個邊框寬 */
    width: calc(100% + 2 * var(--bw));   /* 寬度增加兩個邊框寬 */
    height: calc(100% + 2 * var(--bw));  /* 高度增加兩個邊框寬 */
    border-radius: calc(var(--r) + var(--bw));
    background: linear-gradient(#f00, #00f);
  }

  .d1 {
    --r: 10px;
    --bw: 10px;
    width: 150px;
    border: calc(var(--bw) + 1px) dashed #fff;
  }
  .d1::before {
    background: linear-gradient(#f00, #fc0, #0c0, #09c, #00c);
  }
  .d2 {
    --r: 15px;
    --bw: 15px;
    width: 200px;
  }
  .d2::before {
    background:conic-gradient(
        #500 0, #500 45deg,
        #f00 45deg, #f00 90deg,
        #f50 90deg, #f50 135deg,
        #ff0 135deg,#ff0 180deg,
        #0c0 180deg, #0c0 225deg,
        #09d 225deg, #09d 270deg,
        #00b 270deg, #00b 315deg,
        #909 315deg, #909 360deg
      );
  }
</style>

使用 border-image 製作漸層色邊框

第三種方式可以使用 CSS 新的樣式屬性 border-image，運用類似背景色的方式，產生漸層色邊框，下方範例先用 border-image-source 讓漸層色作為影像邊框，接著運用 border-image-slice 將漸層色以 33% 的寬高切開，分別放入對應的元素區域中，就可以很快速的產生漸層色邊框囉！

• 這個做法只能呈現 solid 實心線與 90 度角的邊框，如果要改變邊框造型請參考：影像邊框 border-image
• 線上展示：https://codepen.io/oxxo/pen/xbwXQwm

<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    border-style: solid;
    height: 100px;
    margin: 10px;
    border-image-source: linear-gradient(135deg, red, orange, yellow, green, blue, purple);
    border-image-slice: 33%;
  }
  .a {
    border-width: 10px;
    width: 100px;
  }
  .b {
    border-width: 20px;
    width: 150px;
  }
  .c {
    border-width: 30px;
    width: 200px;
  }
</style>

小結

漸層色邊框的效果其實並不難做，但整體實用性並不高，通常會應用在凸顯重點文字，如果網站有類似需求，不妨可以套用這個效果。

• 原文參考：CSS 漸層色邊框
• 延伸閱讀：CSS 教學大全